<template>
  <view class="user-info">
    <view class="user-info__avatar">
      <image :src="userInfo.avatar" class="user-info__avatar-image" mode="aspectFill" />
    </view>
    <view class="user-info__content">
      <view class="user-info__name">{{ userInfo.nickname || userInfo.username }}</view>
      <view class="user-info__desc">{{ userInfo.id }}</view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { UserInfo } from '@/types';

export default defineComponent({
  name: 'UserInfoComponent',
  props: {
    userInfo: {
      type: Object as PropType<UserInfo>,
      required: true
    }
  }
});
</script>

<style lang="scss">
.user-info {
  display: flex;
  align-items: center;
  padding: 30px 20px;
  background-color: #ffffff;

  &__avatar {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    overflow: hidden;
    margin-right: 20px;

    &-image {
      width: 100%;
      height: 100%;
    }
  }

  &__content {
    flex: 1;
  }

  &__name {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }

  &__desc {
    font-size: 28px;
    color: #999;
  }
}
</style>
